<ng-container [formGroup]="form">

    <ng-container *ngIf="hasLabel">
        <ng-container [ngSwitch]="formBase.controlType">
            <ng-container *ngSwitchCase="'hidden'">
                <input [type]="formBase.type" nzSize="large" nz-input formControlName="{{formBase.key}}"
                       placeholder="{{formBase.placeholder}}">
            </ng-container>

            <ng-container *ngSwitchCase="'title'">
                <div class="sub-title">
                    {{formBase.label}}
                </div>
            </ng-container>
            <ng-container *ngSwitchCase="'location'">
                <kylin-location-list formControlName="{{formBase.key}}"></kylin-location-list>
            </ng-container>

            <ng-container *ngSwitchCase="'upload'">
                <kylin-upload formControlName="{{formBase.key}}"></kylin-upload>
            </ng-container>
        </ng-container>

    </ng-container>

    <ng-container *ngIf="!hasLabel">
        <nz-form-item>

            <nz-form-label [nzSm]="nzSmLabel" [nzXs]="24" nzFor="{{formBase.key}}"
                           [ngClass]="formBase.required?'ant-form-item-required':''">{{formBase.label}}
            </nz-form-label>

            <nz-form-control [nzSm]="nzSmControl" [nzXs]="24">
                <ng-container [ngSwitch]="formBase.controlType">
                    <ng-container *ngSwitchCase="'input'">
                        <ng-container [ngSwitch]="formBase.disabled">
                            <ng-container *ngSwitchCase="true">
                                <input class="disabled-input" [type]="formBase.type" nzSize="large" nz-input
                                       formControlName="{{formBase.key}}" placeholder="{{formBase.placeholder}}"
                                       disabled>
                            </ng-container>
                            <ng-container *ngSwitchCase="false">
                                <input [type]="formBase.type" nzSize="large" nz-input
                                       formControlName="{{formBase.key}}"
                                       placeholder="{{formBase.placeholder}}">
                            </ng-container>
                        </ng-container>

                    </ng-container>

                    <ng-container *ngSwitchCase="'select'">
                        <ng-container [ngSwitch]="formBase['multiple']">
                            <kylin-involved-project *ngSwitchCase="true"
                                                    [formControlName]="formBase.key"></kylin-involved-project>
                            <nz-select *ngSwitchCase="false"
                                       [nzDisabled]="formBase.options.length===0 || formBase.disabled"
                                       [formControlName]="formBase.key"
                                       nzSize="large"
                                       [nzPlaceHolder]="formBase.options.length===0 ? '暂无数据': '请选择'+ formBase.label"
                                       (ngModelChange)="selectValueChange($event)" nzShowSearch nzAllowClear>
                                <nz-option *ngFor="let opt of formBase.options" nzValue="{{opt.value}}"
                                           nzLabel="{{opt.label}}"></nz-option>
                            </nz-select>
                        </ng-container>
                    </ng-container>

                    <ng-container *ngSwitchCase="'text'">
                        <kylin-images *ngIf="formBase['isImg']" [eleId]="formBase.key"
                                      [images]="formBase.value"></kylin-images>
                        <span *ngIf="!formBase['isImg']" class="input-wrapper"
                              [title]="formBase.value">{{formBase.value}}</span>
                    </ng-container>

                    <ng-container *ngSwitchCase="'date'">
                        <nz-date-picker [nzSize]="'large'" [formControlName]="formBase.key"
                                        [nzDisabled]="formBase.disabled"></nz-date-picker>
                    </ng-container>

                    <ng-container *ngSwitchCase="'cascader'">
                        <nz-cascader [nzSize]="'large'"
                                     [nzOptions]="formBase.options"
                                     [formControlName]="formBase.key" [nzPlaceHolder]="'请选择'+ formBase.label">
                        </nz-cascader>
                    </ng-container>

                    <ng-container *ngSwitchCase="'dateRange'">
                        <nz-range-picker [nzShowTime]="formBase.showTime" [formControlName]="formBase.key"></nz-range-picker>
                    </ng-container>

                </ng-container>
            </nz-form-control>
        </nz-form-item>
    </ng-container>

</ng-container>
